<%@ page contentType="text/html;charset=utf-8"  language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<jsp:include page="../header.jsp" />

<jsp:include page="../navbar.jsp" />
	
<div class="container-fluid container-margin-top">

<div class="row">
	<div class="col-lg-2 col-sm-3">
		<jsp:include page="sidebar.jsp" />
	</div>

	<div class="col-lg-10 col-sm-9">
		<div class="row">   
			<div class="col-sm-12">
				<div class="dialog dialog-success">
					<h4>我的签到</h4>
					<div class="row">
						<form role="form" action="<c:url value="/home/signin.do"/>" method="get">
							<div class="form-group col-sm-6 col-md-4">
								<label class="control-label">开始日期</label> 
								<div class="input-group">
									<span class="input-group-btn">
										<button class="btn" type="button"><span class="fui-calendar"></span></button>
									</span>
									<input type="text" class="form-control" id="datepicker-01" name="start_date" value="<fmt:formatDate value="${startDate}" pattern="yyyy-MM-dd"/>"/>
								</div>      
							</div>
							<div class="form-group col-sm-6 col-md-4">
								<label class="control-label">结束日期</label> 
								<div class="input-group">
									<span class="input-group-btn">
										<button class="btn" type="button"><span class="fui-calendar"></span></button>
									</span>
									<input type="text" class="form-control" id="datepicker-02" name="end_date" value="<fmt:formatDate value="${endDate}" pattern="yyyy-MM-dd"/>"/>
								</div>
							</div>
							<div class="form-group col-sm-6 col-md-4">
								<label class="control-label">　　　　</label>
								<div class="control-content">
								<button class="btn btn-primary btn-block" id="search-btn" type="submit" onclick="onSearch(this)" data-loading-text="查找中。。。">查找</button>
								</div> 
							</div>   
						</form>
					</div>
				</div>
				<div class="dialog dialog-info">
					<div class="table-responsive">
						<table class="table table-hover table-deep text-left" style="margin-top: 20px;">
								<thead>
									<th>日期</th>
									<th>签到</th>
									<th></th>
								</thead>
								<tbody>
									<c:forEach items= "${attendList}" var="attend">
										<tr class="<c:if test="${attend.inTime > inTime}">danger</c:if>">
											<td><fmt:formatDate value="${attend.date}" pattern="yyyy-MM-dd"/></td>
											<td><fmt:formatDate value="${attend.inTime}" pattern="HH:mm:ss"/></td>
											<td>
											<c:choose>
												<c:when test="${attend.inTime > inTime}">
													<span class="fui-cross-circle text-danger"></span>
												</c:when>
												<c:otherwise>
													<span class="fui-check-circle text-primary"></span>
												</c:otherwise>
											</c:choose>  	
										</td>
										</tr>
									</c:forEach>
								</tbody>
							</table>
						</div>
					</div>
				</div>  
			</div>
		</div>
	</div>
</div>

<script>
	document.title = "个人中心-我的签到";

	$(function(){
		initDatepicker($('#datepicker-01'));
		initDatepicker($('#datepicker-02'));
		function initDatepicker(datepickerSelector){
			 datepickerSelector.datepicker({
				showOtherMonths: true,
				selectOtherMonths: true,
				dateFormat: 'yy-mm-dd',
				yearRange: '-1:+1'
			}).prev('.input-group-btn').on('click', function (e) {
				e && e.preventDefault();
				datepickerSelector.focus();
			});
			$.extend($.datepicker, { _checkOffset: function (inst,offset,isFixed) { return offset; } });

			// Now let's align datepicker with the prepend button
			datepickerSelector.datepicker('widget').css({ 'margin-left': -datepickerSelector.prev('.input-group-btn').find('.btn').outerWidth() + 3 });
		}

		// Focus state for append/prepend inputs
		$('.input-group').on('focus', '.form-control', function () {
			$(this).closest('.input-group, .form-group').addClass('focus');
		}).on('blur', '.form-control', function () {
			$(this).closest('.input-group, .form-group').removeClass('focus');
		});
	});
</script>
<jsp:include page="../footer.jsp" />